<template>
  <view class="gauge-container">
    <!--<view class="title">温度类</view>-->
    <!--<canvas class="canvas" canvas-id="canvas"></canvas>-->
    <!--<view class="title">进度类</view>-->
    <canvas class="canvas" :canvas-id="canvasId"></canvas>
  </view>
</template>

<script>
import Gauge from "./index.js";
export default {
  name: "gauge",
  data() {
    return {
    	canvasId: 'canvas'+Math.random()*10000
    };
  },
  props:{
  	value:{
  		default:0,
      type:Number
    },
	  color:{
		  default:'var(--textColor)',
		  type:String
	  },
	  lineWidth:{
		  default:5,
		  type:Number
	  },
  },
  mounted() {
    // new Gauge({
    //   canvasId: "canvas",
    //   width: 200,
    //   min: 16,
    //   max: 30,
    //   value: 20.5,
    //   unit: "℃",
    //   showTick: true,
    // });
    console.log(this.canvasId)
    new Gauge({
      canvasId: this.canvasId,
      value: this.value,
      lineWidth: this.lineWidth,
      // progressColor: ["#2196F3", "#9C27B0", "#F44336"],
      valueColor: this.color,
    });
  },
};
</script>

<style>
.gauge-container {
  text-align: left;
}
.title {
  /*margin-bottom: 20rpx;*/
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
}
.canvas {
  width: 120rpx;
  height: 120rpx;
  /*margin: 40rpx auto;*/
}
</style>
